<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>添加、编辑疗程</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/font-awesome-4.3.0/css/font-awesome.min.css" />
		<link href="../css/config.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
		<style>
		#drug-task .mui-slider-right a{
			text-align: center;
			color:white!important;
		}
	</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav km-navbar">
			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
			<h1 id="title" class="mui-title km-view-title">编辑疗程</h1>
		</header>
		<div class="mui-content3 mui-fullscreen mui-scroll-wrapper" style="background:#efefef;">
			<div class="mui-scroll">
				<p class="view-title">每次用药的时间区间为一个疗程</p>
				<ul class="mui-table-view ul-input">
					<li class="mui-table-view-cell">
						疗程序号:
						<select class="selectShort">
							<option>第一疗程</option>
							<option>第一疗程</option>
							<option>第一疗程</option>
						</select><i class="fa fa-angle-down"></i>

					</li>
					<li class="mui-table-view-cell">
						起始时间:
						<span class="right">
						<button id='pickDateBtn' type="button" class="mui-btn mui-btn-block datepicker">选择日期</button>
						</span>
					</li>
					<li class="mui-table-view-cell">
						持续时间:
						<div class="input-20">
							<select class="selectShort">
								<option>日</option>
								<option>周</option>
								<option>月</option>
								<option>年</option>
							</select>
						</div>
						<div class="input-20">
							<input type="text" placeholder="0" />
						</div>
					</li>
					<li class="mui-table-view-cell">
						添加药品:
						<span class="mui-icon mui-icon-plus button-cover"></span>
						<select class="selectButton">
							<option>A药</option>
							<option>B药</option>
							<option>C药</option>
							<option>D药</option>
						</select>
						<ul class="mui-table-view" id="drug-task">
							<li class="mui-table-view-cell">
								<div class="mui-slider-right mui-disabled">
									<a class="mui-btn mui-btn-red">删除</a>
								</div>
								<div class="mui-slider-handle">
										<span class="name-label">A药</span>
										<select class="selectShort">
											<option>一日一次</option>
											<option>一日三次</option>
										</select><i class="fa fa-angle-down"></i>
								</div>

							</li>
							<li class="mui-table-view-cell">
								<div class="mui-slider-right mui-disabled">
									<a class="mui-btn mui-btn-red">删除</a>
								</div>
								<div class="mui-slider-handle">
										<span class="name-label">B药</span>
										<select class="selectShort">
											<option>一日一次</option>
											<option>一日三次</option>
										</select><i class="fa fa-angle-down"></i>
								</div>
							</li>
						</ul>

					</li>
				</ul>
				<a class="enter-button-100">保&nbsp;存</a>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/Global.js"></script>
		<script src="../js/index.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
			//	 时间选择器
			var info = document.getElementById("pickDateBtn");
			document.getElementById("pickDateBtn").addEventListener('tap', function() {
					dLong.pickDate(function(e) {
						var d = e.date;
						pickDateBtn.innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
					}, function(e) {});
				})
				//			药品左划控件
			$('#drug-task').on('slideleft', '.mui-table-view-cell', function(event) {
				var elem = this;
				mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
					if (e.index == 0) {
						elem.parentNode.removeChild(elem);
					} else {
						setTimeout(function() {
							$.swipeoutClose(elem);
						}, 0);
					}
				});
			});
		</script>
	</body>

</html>